﻿<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :maskClosable="true"
    @close="onDrawerClose"
    :visible="visible"
    width="45%"
    :getContainer="false"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-card id="CodeInfo" title="编码信息">
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="排序"
            prop="Sort"
            class="formItem"
          >
            <a-input
              style="width: 580px"
              type="number"
              v-model="entity.Sort"
              autocomplete="off"
              min="0"
              placeholder="越小越靠前"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="批准状态"
            prop="ApprovalStatus"
            class="formItem"
          >
            <a-radio-group style="width: 580px" v-model="entity.ApprovalStatus" :default-value="0" button-style="solid">
              <a-radio-button :value="1"> 已审批</a-radio-button>
              <a-radio-button :value="0"> 未审批</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="编码"
            prop="Code"
            class="formItem"
          >
            <a-input style="width: 580px" v-model="entity.Code" autocomplete="off" placeholder="自定义编码" />
          </a-form-model-item>
        </a-card>
        <p></p>
        <a-card id="BaseInfo" title="基本信息">
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="电梯品牌"
            prop="E_Brand"
            class="formItem"
          >
            <a-select
              style="width: 580px"
              default-value=""
              v-model="entity.E_Brand"
              ref="E_Brand"
              @change="handleChange"
            >
              <a-select-option v-for="item in eBrandName" :key="item.Id" :value="item.Name">{{item.Name}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="电梯系列"
            prop="E_Series"
            class="formItem"
          >
            <a-select style="width: 580px" default-value="Name" v-model="entity.E_Series" ref="E_Series">
              <a-select-option v-for="item in eSeriesName" :key="item.Id" :value="item.Name">{{item.Name}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="机房类型"
            prop="E_RoomType"
            class="formItem"
          >
            <a-select style="width: 580px" default-value="" v-model="entity.E_RoomType" ref="E_RoomType">
              <a-select-option
                v-for="item in eRoomTypeName"
                :key="item.Id"
                :value="item.DicValue"
              >{{ item.DicValue }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="对重类型"
            prop="E_CounterWeight"
            class="formItem"
          >
            <a-select style="width: 580px" default-value="" v-model="entity.E_CounterWeight" ref="E_CounterWeight">
              <a-select-option
                v-for="item in eCounterWeightName"
                :key="item.Id"
                :value="item.DicValue"
              >{{ item.DicValue }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="是否有对重安全钳"
            prop="E_CounterWeight"
            class="formItem"
          >
            <a-radio-group style="width: 580px" v-model="entity.E_SafetyBear" :default-value="false" button-style="solid">
              <a-radio-button :value="true"> 有</a-radio-button>
              <a-radio-button :value="false"> 无</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="轿厢类型"
            prop="E_LiftCarType"
            class="formItem"
          >
            <a-select style="width: 580px" default-value="" v-model="entity.E_LiftCarType" ref="E_LiftCarType">
              <a-select-option
                v-for="item in eCarType"
                :key="item.Id"
                :value="item.DicValue"
              >{{ item.DicValue }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="开门方式"
            prop="E_OpenDoorMode"
            class="formItem"
          >
            <a-select style="width: 580px" default-value="" v-model="entity.E_OpenDoorMode" ref="E_OpenDoorMode">
              <a-select-option v-for="item in eOpenDoor" :key="item.Id" :value="item.DicValue">{{ item.DicValue }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-card>
        <p></p>
        <a-card title="数据信息【长度单位均为：mm】">
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="载重(kg)"
            prop="E_Load"
            class="formItem"
          >
            <a-input type="number" style="width: 580px" v-model="entity.E_Load" autocomplete="off" placeholder="载重" />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="梯速(m/s)"
            prop="E_Speed"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_Speed"
              autocomplete="off"
              min="0"
              placeholder="梯速"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="载重人数"
            prop="E_LoadNum"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_LoadNum"
              autocomplete="off"
              min="0"
              placeholder="载重人数"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="最大停站数"
            prop="E_MaxStop"
            class="formItem"
          >
            <a-select style="width: 580px" default-value="" v-model="entity.E_MaxStop" ref="E_MaxStop">
              <a-select-option v-for="item in eStop" :key="item.Id" :value="item.DicValue">{{ item.DicValue }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="最大提升高度"
            prop="E_MaxLiftHeight"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_MaxLiftHeight"
              autocomplete="off"
              min="0"
              placeholder="最大提升高度"
            />
          </a-form-model-item>

          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="井道宽度"
            prop="E_ShaftWidth"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_ShaftWidth"
              autocomplete="off"
              min="0"
              placeholder="井道宽度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="井道宽度修正值"
            prop="E_ShaftWidthAdd"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_ShaftWidthAdd"
              autocomplete="off"
              min="0"
              placeholder="井道宽度修正值"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="井道深度"
            prop="E_ShaftDepth"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_ShaftDepth"
              autocomplete="off"
              min="0"
              placeholder="井道深度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="井道深度修正值"
            prop="E_ShaftDepthAdd"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_ShaftDepthAdd"
              autocomplete="off"
              min="0"
              placeholder="井道深度修正值"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="机房宽度"
            prop="E_MRWidth"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_MRWidth"
              autocomplete="off"
              min="0"
              placeholder="机房宽度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="机房深度"
            prop="E_MRDepth"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_MRDepth"
              autocomplete="off"
              min="0"
              placeholder="机房深度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="机房净高"
            prop="E_MRNetHeight"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_MRNetHeight"
              autocomplete="off"
              min="0"
              placeholder="机房净高"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="轿厢宽度"
            prop="E_LiftCarWidth"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_LiftCarWidth"
              autocomplete="off"
              min="0"
              placeholder="轿厢宽度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="轿厢深度"
            prop="E_LiftCarDepth"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_LiftCarDepth"
              autocomplete="off"
              min="0"
              placeholder="轿厢深度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="轿厢净高"
            prop="E_LiftCarNetHeight"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_LiftCarNetHeight"
              autocomplete="off"
              min="0"
              placeholder="轿厢净高"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="顶层高度"
            prop="E_TopHeight"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_TopHeight"
              autocomplete="off"
              min="0"
              placeholder="顶层高度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="顶高修正值"
            prop="E_TopHeightAdd"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_TopHeightAdd"
              autocomplete="off"
              min="0"
              placeholder="顶高修正值"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="底坑深度"
            prop="E_BottomDepth"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_BottomDepth"
              autocomplete="off"
              min="0"
              placeholder="底坑深度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="底深修正值"
            prop="E_BottomDepthAdd"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_BottomDepthAdd"
              autocomplete="off"
              min="0"
              placeholder="底深修正值"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="轿厢门宽度"
            prop="E_LiftCarDoorW"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_LiftCarDoorW"
              autocomplete="off"
              min="0"
              placeholder="轿厢门宽度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="轿厢门高度"
            prop="E_LiftCarDoorH"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_LiftCarDoorH"
              autocomplete="off"
              min="0"
              placeholder="轿厢门高度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="结构门宽度"
            prop="E_StructuralDoorW"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_StructuralDoorW"
              autocomplete="off"
              min="0"
              placeholder="结构门宽度"
            />
          </a-form-model-item>
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="结构门高度"
            prop="E_StructuralDoorH"
            class="formItem"
          >
            <a-input
              type="number"
              style="width: 580px"
              v-model="entity.E_StructuralDoorH"
              autocomplete="off"
              min="0"
              placeholder="结构门高度"
            />
          </a-form-model-item>
        </a-card>
        <p></p>
        <a-card title="备注信息">
          <a-form-model-item
            :labelCol="{ style: 'width: 130px;float:left;' }"
            label="电梯备注"
            prop="Remark"
            class="formItem"
          >
            <a-textarea
              style="width: 580px;height: 100px"
              v-model="entity.Remark"
              autocomplete="off"
              placeholder="电梯备注信息"
              :allowClear="true"
              :max-length="300"
            />
          </a-form-model-item>
        </a-card>
        <p style="height: 50px"></p>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 100px" @click="onDrawerClose">取消</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  props: {
    parentObj: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      layout: {
        labelCol: { span: 10 },
        wrapperCol: { span: 12 }
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {
        E_Brand: [{ required: true, message: '请选择电梯品牌信息' }],
        E_Load: [{ required: true, message: '请填写载重信息' }]
      },
      title: '',
      queryParam: {},
      eBrandName: [],
      eSeriesName: [],
      eRoomTypeName: [],
      eCounterWeightName: [],
      eCarType: [],
      eOpenDoor: [],
      eStop: []
    }
  },
  methods: {
    init () {
      this.visible = true
      this.entity = {
        E_SafetyBear: false,
        ApprovalStatus: 0
      }
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.eBrandName = {}
      this.$http.post('/Elevator_Manage/Elevator_Brand/GetDataList', {}).then((resJson) => {
        this.eBrandName = resJson.Data
      })
      this.$http.post('/Base_ProjectManage/Project_DictionaryMain/GetTheDataByDicKey', { Condition: 'DicKey', Keyword: 'E_RoomType' }).then((resJson) => {
        this.eRoomTypeName = resJson.Data.DictionaryDetailsList
      })
      this.$http.post('/Base_ProjectManage/Project_DictionaryMain/GetTheDataByDicKey', { Condition: 'DicKey', Keyword: 'E_CounterWeight' }).then((resJson) => {
        this.eCounterWeightName = resJson.Data.DictionaryDetailsList
      })
      this.$http.post('/Base_ProjectManage/Project_DictionaryMain/GetTheDataByDicKey', { Condition: 'DicKey', Keyword: 'E_LiftCarType' }).then((resJson) => {
        this.eCarType = resJson.Data.DictionaryDetailsList
      })
      this.$http.post('/Base_ProjectManage/Project_DictionaryMain/GetTheDataByDicKey', { Condition: 'DicKey', Keyword: 'E_OpenDoorMode' }).then((resJson) => {
        this.eOpenDoor = resJson.Data.DictionaryDetailsList
      })
      this.$http.post('/Base_ProjectManage/Project_DictionaryMain/GetTheDataByDicKey', { Condition: 'DicKey', Keyword: 'E_MaxStop' }).then((resJson) => {
        this.eStop = resJson.Data.DictionaryDetailsList
      })
      this.loading = false
    },
    openDrawer (id, title) {
      this.init()
      this.title = title
      if (id) {
        this.loading = true
        this.$http.post('/Elevator_Manage/Elevator_SampleInfo/GetTheData', { id: id }).then((resJson) => {
          this.loading = false
          this.entity = resJson.Data
          /**/
          const obj = this.eBrandName.find((i) => {
            return i.Name === this.entity.E_Brand
          })
          this.eSeriesName = {}
          this.queryParam.condition = 'BrandId'
          this.queryParam.keyword = obj.Id
          this.$http
            .post('/Elevator_Manage/Elevator_Series/GetDataList', {
              Search: this.queryParam
            })
            .then((resJson) => {
              this.eSeriesName = resJson.Data
            })
          /**/
        })
      }
    },
    onDrawerClose () {
      this.visible = false
    },
    handleChange (value) {
      const obj = this.eBrandName.find((i) => {
        return i.Name === value
      })
      this.eSeriesName = {}
      this.queryParam.condition = 'BrandId'
      this.queryParam.keyword = obj.Id
      this.$http
        .post('/Elevator_Manage/Elevator_Series/GetDataList', {
          Search: this.queryParam
        })
        .then((resJson) => {
          this.eSeriesName = resJson.Data
          this.entity.E_Series = resJson.Data[0].Name
        })
    },
    handleSubmit () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Elevator_Manage/Elevator_SampleInfo/SaveData', this.entity).then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.$emit('returnMain')
            this.visible = false
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.labelCol{
  width: 120px;
  float: left;
}
.formItem {
  display: inline-block;
  margin: 10px auto;
}

/deep/ .ant-card-head {
  background-color: #1890FF;
  color: white;
  border: 1px solid #1890FF;
}

/deep/ .ant-card-body {
  border: 1px solid #1890FF;
}

/deep/ .has-error .ant-form-explain{
  position:absolute
}
/deep/ .has-success .ant-form-explain{
  position:absolute
}

</style>
